<template>
  <div class="container page">

<checkbox-group @change="checkgroup">
  <div class="cartList" :key="product" v-for="product of productList">
    <div class="topcart">
      <!-- <div><checkbox :checked="product.checked === 1 ? true : false"/></div> -->
      <div v-if="checkedall === 0"><checkbox :value="index"/></div>
      <div v-else-if="checkedall === 1"><checkbox :checked="true"/></div>
      <div v-else><checkbox :checked="false"/></div>
      <div style="text-align: right;color:#f17070">删除</div>
    </div>

    <div class="midcart" @click="productChoose(product.product_id)">
      <div>
        <img :src="product.main_image">
      </div>
      <div style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:5">{{product.name}}</div>
    </div>

    <div class="midcart">
      <div>
        库存:{{product.stock}}个
      </div>
      <div style="text-align: right;color: #44CFDC;">
        ¥{{product.price}}
      </div>
    </div>

    <!-- <div class="des">
      <p style="height: 60rpx;"></p>
      <p class="price"><span>库存:{{product.stock}}个</span><span style="text-align:right;font-size: 40rpx;color:#44CFDC;">¥{{product.price}}</span></p>
    </div> -->

    <form>
      <div class="num">
      <button type="default" @click="down(product.quantity--,product.id,userid,index)"> - </button>
        <input style="height: 100rpx;line-height:100rpx;" type="number" placeholder="请输入数量" @blur="eventhandle(product.quantity,product.id,userid,index)" v-model="product.quantity">
      <button type="default" @click="up(product.quantity++,product.id,userid,index)"> + </button>
      </div> 
    </form>

    <div>&nbsp</div>

  </div>
</checkbox-group>
  <div class="order">
    <div v-if="checkedall === 0"><checkbox :checked="false" @click="chooseAll()"/>全选</div>
    <div v-else-if="checkedall === 1"><checkbox :checked="true" @click="chooseAll()"/>全选</div>
    <div v-else><checkbox :checked="false" @click="chooseAll()"/>全选</div>
    <div>总价:{{total}}</div>
    <div style="color:#fff;background-color:#44CFDC;" @click="ordercreate(cartList)"> 去结算 </div>   
  </div>

  </div>
</template>
<script>
// var WXBizDataCrypt = require('@/tools/WXBizDataCrypt')
import qcloud from 'wafer2-client-sdk'
 
import {showSuccess, showModal} from '@/util'
import {get, post, getAuth, postAuth} from '@/util'
// import {get2, post2} from '@/server/api'
import config from '@/config'
export default {
 
  data () {
    return {
      checkedall: 0,
      tabA: 0,
      form: {"num":1},
      total: 0,
      cartList: [],
      productList: [],
      focus: true,
      inputValue: ''
    }
  },
  mounted () {
    this.userinfo = wx.getStorageSync('userinfo')
  },
  onShareAppMessage() {
    return {
      title: `${wx.getStorageSync('userinfo').nickName}邀请你使用好区多`,
      imageUrl: 'https://www.rrjiaoyi.com/static/rr-min/share/share.png',
      path: `/pages/me/main?sharepath=home`
    }
  },
  methods: {
    // 单选
    checkgroup(e){
      this.checkedall = 0
      // console.log('checkbox发生change事件，携带value值为：',  e.mp.detail.value)
      console.log('e.mp.detail.value', e.mp.detail.value)

      if(e.mp.detail.value[0]) {

        this.cartList = []
        this.total = 0
        e.mp.detail.value.forEach(element => {

          this.cartList.push(this.productList[element])

        });

        this.cartList.forEach(element => {

         this.total = this.total + element.price * element.quantity
          // console.log(element)

        });

      } else {
        this.cartList = []
        this.total = 0
      }

      console.log('cartList',  this.cartList)
      
      
    },
    // 全选
    chooseAll() {
      console.log('checkedall', this.checkedall)
      if(this.checkedall === 0 || this.checkedall === -1) {
        this.total = 0
        this.checkedall = 1
        this.cartList = this.productList

        this.cartList.forEach(element => {

         this.total = this.total + element.price * element.quantity

        });

        console.log(this.cartList)
      } else {
        this.checkedall = -1
        this.cartList = []
        this.checkedall = 0

        this.total = 0
        console.log(this.cartList)
      }
    },
    eventhandle(count,productid,userid,index){
        // console.log(x)
        if(count>0) {
        getAuth(`geweb/cart/modifycartquantity?count=${count}&productid=${productid}&userid=21`, {}, {})
          .then(result => {

            this.get_cartList()
        console.log(index)

          // this.total = 0
          // this.cartList.forEach(element => {

          // this.total = this.total + element.price * element.quantity

          // });

        })
        } else {
            this.get_cartList()
        }

    },
    async get_cartList(userId) {
      return await getAuth(`geweb/cart/get_cartlist?userid=21`, {}, {}).then(result => {


        if(result.code === 301) {
          // console.log("去登陆")
          wx.switchTab({
            url: `/pages/usercenter/main`
          })
          wx.showToast({
            title: '请登录',
            icon: 'none'
          })
        }

        if(result.code === 200) {
            console.log(result.res)
            this.productList = result.res;
        }


        // this.total = 0
        // for (let res of result.res) {
        //   res.quantity * res.price
        //   this.total+=res.quantity * res.price
        // }
        //   console.log(this.total)

      })
    },
    productChoose (id) {
      // console.log(name, img, userId, accountId)
      wx.navigateTo({
        url: `/pages/product-detail/main?id=${id}`
      })
    },
    up(count,productid,userid,index) {
      // console.log('index', index)
        getAuth(`geweb/cart/modifycartquantity?count=${count+1}&productid=${productid}&userid=21`, {}, {})
          .then(result => {

            // this.get_cartList()

        })

    },
    down(count,productid,userid,index) {
      // console.log('index', index)

        if(count>1) {
        getAuth(`geweb/cart/modifycartquantity?count=${count-1}&productid=${productid}&userid=21`, {}, {})
          .then(result => {

            // this.get_cartList()

        })
        }
    },
    async player() {
      return await post('minipro/List', {}, {'api':'all', 'page':1})
    },
// 去结算
    ordercreate(cartList) {
          console.log(this.cartList)
          // console.log(JSON.stringify(this.cartList))

          // console.log(encodeURIComponent(JSON.stringify(this.cartList)))

          // console.log(decodeURIComponent(encodeURIComponent(JSON.stringify(this.cartList))))
          // console.log(JSON.parse(decodeURIComponent(encodeURIComponent(JSON.stringify(this.cartList)))))
          if(cartList[0]) {
            wx.navigateTo({
              url: `/pages/ordercreate/main?orderlist=${encodeURIComponent(JSON.stringify(this.cartList))}`
            })
          }

    },
    async joke() {
      return await get2('api/jokes', {})
    },
    predict () {
      wx.navigateTo({
        url: '/pages/search/main'
      })
    },
    jumpClick (comment) {
      wx.navigateTo({
        // url: '/pages/web-view/main'
        url: '/pages/web-view/main?path=' + 'https://wj.qq.com/s/2491547/f457/'
        // url: '/pages/detail/main'
      })
    }

  },
  onShow () {
    this.get_cartList()
      // .then(result => {

      //   if(result.code === 301) {
      //     // console.log("去登陆")
      //     wx.showToast({
      //       title: '请登陆',
      //       icon: 'none'
      //     })
      //   }

      //   if(result.code === 200) {
          
      //   }
        
      // })

    // getAuth(`geweb/shop/user/lslogin`, {}, {})
    // .then(result => {
    //   console.log(result.code)
    //   if(result.code === 200) {
    //      this.get_cartList()
    //   } else {
    //     console.log("去注册")
    //   }
    // })

  }
}
</script>

<style scoped lang='scss'>
.container{
  font-size: 30rpx;
}
page {
  background-color: #ffffff;
  width: 100%;
  height: 100%;
}
.section {
  text-align: center;
  margin-top: 200rpx;
  padding: 0 100rpx;
  display: flex;
  height: 80rpx;
  line-height: 80rpx;
}
.recomond {
  margin: 0 25rpx;
  margin-top: 25rpx;  
  height: 100rpx;
  line-height: 100rpx;
  text-align: center;
  display: flex;
  p {
    flex: 1;
  }
}
.choose {
  color: #44CFDC;
}
.order {
  z-index: 999;
  position: fixed; 
  bottom: 0; 
  width: 100%; 
  background-color: #ffffff;
  height: 100rpx;
  line-height: 100rpx;
  display: flex;
  text-align: center;
    div {
      flex: 1;
    }
}
.order2 {
  z-index: 999;
    position: fixed; 
  bottom: 0; 
  width: 100%; 
  background-color: #ffffff;
  height: 100rpx;
  line-height: 100rpx;
}
.cartList {
  margin: 50rpx 25rpx;
  padding: 0 25rpx;
  border: 1px solid #ddd;
  // text-align: center;
  img {
    height: 100rpx;
    width: 100rpx;
  }
  .midcart {
    height: 100rpx;
    line-height: 100rpx;
    display: flex;
    div {
      flex: 1;
    }
  }
  .topcart {
    height: 100rpx;
    line-height: 100rpx;
    display: flex;
    div {
      flex: 1;
    }
  }
}
.productList {
  margin: 0 25rpx;
  margin-top: 50rpx;
  border: 1px solid #ddd;
  border-radius: 4px;
  height: 200rpx;
  // line-height: 200rpx;
  display: flex;
  text-align: center;
  div {
    flex: 1;
      img{
        width: 180rpx;
        height:180rpx;
        margin: 10rpx;
        // border-radius: 50%;
    }
  }
  .des{
    width: 400rpx;
    flex: 3;
    height: 200rpx;
    margin: 10rpx 30rpx;
    p {
      text-align: left;
      line-height: 60rpx;
    }
    .price {
      display: flex;
      span {
        flex: 1;
      }
    }
  }
}

.num {
  display: flex;
  text-align: center;
  height: 100rpx;
  line-height:100rpx;
}

.foot {
  color: rgb(45, 161, 187);
  text-align: center;
  margin-top: 200rpx;
}
</style>
